<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>商品服务</title>
	<link rel="stylesheet" href="css/main.css">

	<style>
		.div_td {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			letter-spacing: 2px;
			margin: 5px 0;

		}

		.tab1 {
			font-size: 12px;
			margin: 2.5%;
			padding: 5px;
			background-color: #FFFFFF;
			border-radius: 5px;
			letter-spacing: 1px;
			width: 95%;
		}

		.tab1 img {
			width: 100px;
			height: 100px;
			border-radius: 5px;
		}

		.number {
			color: red;
			font-size: 13px;
			font-weight: 600;
		}

		.tab1:active {
			background-color: #e2e1e1;
			text-decoration: none;

		}

		.tab_tr1 {
			text-align: center;
			border-right: 1px silver solid;
			height: 40px;
			width: 33%;
			color: black;
		}

		.tab_tr2 {
			text-align: center;
			border-right: 1px silver solid;
			height: 40px;
			width: 33%;
			color: #2503c2;
		}

		.nav-box {
			width: 100%;
			height: 100%;
			position: relative;
		}

		.nav-tap {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: absolute;
			top: 0;
			font-size: 1rem;
			background-color: #fff;
			padding: 0 4%;
			box-sizing: border-box;
		}

		.nav_tap_item {
			width: 100%;
			display: block;
			color: #9a9a9a;
			font-size: 1rem;
			padding: .8rem 0;
			text-align: center;
			transition: .3s;
		}

		.nav_tap_item_on {
			width: 100%;
			display: block;
			color: #9a9a9a;
			font-size: 1rem;
			padding: .8rem 0;
			text-align: center;
			transition: .3s;
			font-size: 1.1rem;
			color: #4a90e2;
			position: relative;
		}

		.nav_tap_item_on:after {
			content: '';
			width: 80%;
			height: 4px;
			background-color: #4a90e2;
			position: absolute;
			bottom: 0;
			left: 10%;
		}

		.bkjf1 {
			float: right;
			padding: 1px 8px;
			border: 2px #d40101 solid;
			color: #d40101;
			border-radius: 5px;
			font-weight: bold;
		}

		.bkjf2 {
			float: right;
			padding: 1px 8px;
			border: 2px #12bf00 solid;
			color: #12bf00;
			border-radius: 5px;
			font-weight: bold;
		}
	</style>
</head>

<body>

	<div id="app">
		<div class="header">
			<div class="header_title">商品服务</div>
			<a onclick="history.back()">
				<img src="image/return.png" alt="" class="return">
			</a>
		</div>
		<div style="height:40px"></div>

		<div class="nav-box">
			<div class="nav-tap">
				<a class="nav_tap_item" :class="{nav_tap_item_on:status==0}" @click="status=0">全部</a>
				<a class="nav_tap_item" :class="{nav_tap_item_on:status==1}" @click="status=1">待缴费</a>
				<a class="nav_tap_item" :class="{nav_tap_item_on:status==2}" @click="status=2">已缴费</a>
			</div>
		</div>

		<div style="height:50px"></div>


		<div v-for="(item,index) in list" :key="item.id" v-if="status==0||((status==1)^paid(item))">
			<a :href="'school_commodity_detail.html?id='+item.id">
				<table border="0" class="tab1">
					<tr>
						<!-- <td rowspan="4" style="width:100px;height:100px;"><img src="image/zg.jpg" /></td> -->
						<td style="font-size: 14px">{{item.name}}
							<span class="bkjf2" v-if="paid(item)">已缴费</span>
							<span class="bkjf1" v-else>待缴费</span>
						</td>
					</tr>
					<tr>
						<td class="number" v-text="'￥'+item.fee/100"></td>
					</tr>
					<tr>
						<td class="div_td" v-text="item.remark"></td>
					</tr>
				</table>
			</a>
		</div>

	</div>

	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>

	<script>
		new Vue({
			el: "#app",
			data: {
				status: 0,
				list: [],
				set: {}
			},
			created: function () {
				axios.get('/s/pay/list').then(function (res) {
					var set = {};
					res.data.forEach(function (it) {
						set[it.relatedId] = true;
					});
					this.set = set;
				}.bind(this));

				axios.get('/s/charge/list').then(function (res) {
					this.list = res.data;
				}.bind(this));
			},
			methods: {
				paid: function (it) {
					return it.id in this.set;
				}
			}
		})
	</script>
</body>

</html>